<template>
  <view>
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">{{$t('期望港铁')}}</block>
      <block slot="right">
        <view class="text-df" @click.stop="submit" style="color: #0181FF;">{{$t('确定')}}</view>
      </block>
    </fu-custom>
    <view class="flex text-df container">
      <view class="container-left">
        <view class="items" :class="item.is_choose==1 ? 'active' : ''" v-for="(item,index) in dataList" :key="index"
          @click="choosebig(item)">
          {{item.name}}
        </view>
      </view>
      <view class="container-right">
        <view class="margin-left-sm items" :class="itemC.is_choose==1 ? 'active' : ''"
          v-for="(itemC,indexC) in litileList" :key="indexC" @click="chooseItem(itemC)">
          {{itemC.name}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [],
        litileList: [],
        chooseItemArr: [],
        type: '',
        addr_id: ''
      }
    },
    onLoad(options) {
      if (options.addr_id) {
        this.addr_id = options.addr_id
      }
      this.getData()
    },
    methods: {
      choosebig(item) {
        item.is_choose == 1 ? item.is_choose = 0 : item.is_choose = 1
        this.litileList = item.children
      },
      chooseItem(item) {
        let choosebigArr = this.dataList.filter(item => item.is_choose == 1)
        if (choosebigArr.length == 0) {
          this.$message.info(this.$t('请先选择左边期望港铁'))
          return;
        }
        item.is_choose == 1 ? item.is_choose = 0 : item.is_choose = 1
      },
      getData() {
        this.$api.post(global.apiUrls.post65839ead407bb, {
          mrt_id: this.addr_id
        }).then(res => {
          this.dataList = res.data.data
          this.litileList = this.dataList[0].children
          // if (!this.chooseId) {
          //   this.litileList = this.dataList[0].children
          // } else {
          //   this.litileList = this.dataList.filter(item => item.aid == this.chooseId)[0].children
          // }
        })
      },
      submit() {
        let chooseArr = this.dataList.filter(item => item.is_choose == 1)
        let chooseArrL = chooseArr.map(item => {
          const obj = {
            ...item,
            chid: item.children.filter(itemC => itemC.is_choose == 1)
          }
          return obj
        })
        console.log('chooseArrLchooseArrLchooseArrL', chooseArrL)
        if (chooseArrL.length == 0) {
          this.$message.info(this.$t('请选择期望港铁'))
          return;
        }
        uni.$emit('mrtobj', chooseArrL)
        this.$urouter.navigateBack(1);
      },
    }
  }
</script>

<style lang="scss">
  .container {
    width: 100%;
    overflow-y: scroll;

    .items {
      height: 100rpx;
      line-height: 100rpx;
      color: #333;

      &.active {
        color: #0181FF;
        background: #FFF;
      }
    }

    .container-left {
      width: 20%;
      text-align: center;

    }

    .container-right {
      background-color: #FFF;
      width: 80%;
      text-align: left;
    }
  }
</style>
